<template>
  <el-row style="margin-top: 15px">
    <el-col :span="12">
      <el-image src="/src/assets/banner/banner5.jpg" style="height: 400px" fit="cover"/>
    </el-col>
    <el-col :span="12">
      <el-form  class="regForm">
        <h1>用户注册</h1>
        <el-form-item>
          <el-input prefix-icon="User" placeholder="请输入用户名" v-model="userInfo.username"/>
        </el-form-item>
        <el-form-item prefix-icon="key">
          <el-input type="password"  prefix-icon="Key" placeholder="请输入密码" v-model="userInfo.password"/>
        </el-form-item>
        <el-form-item>
          <el-input style="width: 170px; margin-right: 5px" prefix-icon="PictureFilled" placeholder="请输入验证码" v-model="userInfo.captchaInput"/>
          <el-image :src="imgBase64Date" @click="getCaptcha"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"class="regBtn" @click="reg">注册</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script setup>
import userApi from "@/api/userApi.js";
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {useRouter} from  "vue-router"

const router = useRouter();
//保存验证码
const  imgBase64Date = ref(null);
//用户注册信息
const userInfo = ref({
  username: '',
  password: '',
  key: '',
  captchaInput: ''
})
const getCaptcha = () => {
  userApi.captcha()
      .then(resp => {
        imgBase64Date.value = resp.data.imageBase64Data;
        userInfo.value.key = resp.data.key;
      });
}
//用户注册
const reg = () => {
  userApi.reg(userInfo.value)
      .then(resp => {
        if (resp.code == 10000){
          ElMessage.success(resp.msg);
          router.push("/user/login")
        }else {
          ElMessage.error(resp.msg);
        }
      })
}
getCaptcha();
</script>

<style scoped>
  .regForm {
    width: 300px;
    margin: 45px 100px;
  }
  .regForm h1 {
    text-align: center;
    margin-bottom: 20px;
  }
  .regBtn {
    width: 100%;
  }
</style>